<template>
  <div class="artist">
    <br />
    <b-container
      fluid
      style="background-color: rgba(0,0,0,0.8); padding: 10px"
      v-if="imageList != undefined && imageList != null  && imageList.length > 0"
    >
      <b-row align-v="center" v-for="(row,index) in imageList" :key="index" style="padding: 5px;">
        <b-col
          cols="auto"
          md="auto"
          v-for="(col,index) in row"
          :key="index"
          style="margin: 0 auto; padding: 5px;"
        >
          <b-img-lazy thumbnail :src="col.image" :title="col.artist.name" style="width:333px" />
        </b-col>
      </b-row>
    </b-container>
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  props: {
    artist_name_parent: String,
  },
  async asyncData(context) {
    let [request1Data] = await Promise.all([context.$axios.get('/api/images/', { params: { artist: context.route.params.name, showLoading: false } })]).catch(err => {
      console.log(err);
    });
    return {
      images: request1Data.data,
    };
  },
  data() {
    return {
      imageList: [],
      artist: '',
      artist_name: '',
    };
  },
  methods: {
    showArtist() {
      this.$axios
        .get('/api/artists-detail/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.artist = res;
          this.$route.meta.title = this.artist.name + ' | 图片';
          document.title = this.$route.meta.title;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    showImages() {
      this.artist_name = this.artist_name_parent;
      this.$route.meta.title = this.artist_name + ' | 图片';
      document.title = this.$route.meta.title;
      this.$axios
        .get('/api/images/', { params: { artist: this.$route.params.name, showLoading: true } })
        .then(response => {
          var res = response.data;
          var len = res.length;
          var n = 3; //假设每行显示3个
          var lineNum = len % 3 === 0 ? len / 3 : Math.floor(len / 3 + 1);
          for (var i = 0; i < lineNum; i++) {
            var temp = res.slice(i * n, i * n + n);
            this.imageList.push(temp);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  head() {
    return {
      title: this.artist_name_parent + ' | 图片',
    };
  },
  mounted: function() {
    this.$parent.hide_tooltip1();
    this.$store.dispatch('hideloader');
    //this.showArtist();
    //this.showImages();
    this.artist_name = this.artist_name_parent;
    this.$route.meta.title = this.artist_name + ' | 图片';
    document.title = this.$route.meta.title;
    var len = this.images.length;
    var n = 3; //假设每行显示3个
    var lineNum = len % 3 === 0 ? len / 3 : Math.floor(len / 3 + 1);
    for (var i = 0; i < lineNum; i++) {
      var temp = this.images.slice(i * n, i * n + n);
      this.imageList.push(temp);
    }
  },
  watch: {
    $route(to, from) {
      //this.$router.go(0)
      //this.showArtist();
      //this.showImages();
    },
    artist_name_parent(val) {
      this.artist_name = val;
      this.$route.meta.title = this.artist_name + ' | 图片';
      document.title = this.$route.meta.title;
	  this.$parent.hide_tooltip1();
    },
  },
};
</script>


